<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>称重</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,body,#container{
            width: 100%;
            height: 100%;  
            position: relative;
        }
        .weigh-box,.speed-box{
            width: 100%;
            overflow: hidden;
        }
        .weigh-box>div,.speed-box>div{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <Layout style="height:100%;">
            <i-Header>
                <Row style="height: 100%;">   
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                        <h1>称重</h1>
                    </i-Col>
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                       <Row>
                           <i-Col span="8" >
                                空载重量(千克) :
                           </i-Col>
                           <i-Col span="16" style="padding:0 10px 0 0;">
                                <i-input v-model.trim="deadweight"></i-input>
                           </i-Col>
                       </Row>
                    </i-Col>
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                        <Row>
                            <i-Col span="6" >
                                过滤(千克) :
                            </i-Col>
                            <i-Col span="18" style="padding:0 10px 0 0;">
                                 <i-input v-model.trim="interval"></i-input>
                            </i-Col>
                        </Row>
                    </i-Col>
                    <i-Col span="4" style="padding: 0 10px;">
                        <i-button @click="getWeighingInfo" style="width:150px;">查询</i-button>
                    </i-Col>
                    <i-Col span="6" style="height: 100%;color: #ffffff;text-align: right;"> 
                        <h2>更新时间 : {{updateTimeStr}}</h2>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;color: #ffffff;text-align: right;"> 
                        <i-button @click="fullScreen">全屏</i-button>
                    </i-Col>
                </Row> 
            </i-Header>
            <i-Content :style="contentCls">
                <div class="weigh-box" :style="weighBoxStyle">
                    <div id="weigh-box"></div>
                </div>
                <div class="speed-box" :style="speedBoxStyle">
                    <div id="speed-box"></div>
                </div>   
            </i-Content>
        </Layout>   
    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/echarts.min.js"></script>

    <script>
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");

        var vRoot = new Vue({
            el:"#container",
            data:{
                weighChart:null,
                speedChart:null,
                contentHeight:500,
                dateArr : [],
                weightArr:[],
                speedArr:[],
                fixedWeightArr:[],
                interval:5,
                deadweight:5000,
                isFullScreen:false,
            },
            methods: {
                getWeighChartOption:function(){
                  var option = {
                        title: {
                            text: '重量'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['重量','修正重量']
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dateArr
                        },
                        yAxis: {
                            type: 'value',
                            min: function(value) {
                                return value.min - 10;
                            },
                            max: function(value) {
                                return value.max + 10;
                            }
                        },
                        series: [
                            {
                                name:'重量',
                                type:'line',
                                stack: '重量',
                                data:this.weightArr,
                                lineStyle :{
                                    color:"red"
                                },
                                smooth :true
                            },
                            {
                                name:'修正重量',
                                type:'line',
                                stack: '修正重量',
                                data:this.fixedWeightArr,
                                lineStyle :{
                                    color:"green"
                                },
                                smooth :true
                            }
                        ]
                    };
                    return option;
                },
                getSpeedChartOption:function(){
                    var option = {
                        title: {
                            text: '速度'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['速度']
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dateArr
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [
                            {
                                name:'速度',
                                type:'line',
                                stack: '总量',
                                data:this.speedArr,
                                smooth :true

                            }
                        ]
                    };
                    return option;
                },
                fullScreen:function(){
                    this.isFullScreen = !this.isFullScreen;
                    var me = this;
                    setTimeout(function () { 
                        me.weighChart.resize();
                        me.speedChart.resize();
                    },500)
                },
                setContentHeight:function(){
                    var wHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    this.contentHeight = wHeight - 64;
                },
                getWeighingInfo:function(){
                    var url = myUrls.queryWeightDynamic() , me = this;
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var dateStr = year + "-" + (month<10?'0'+month:month) + "-" + (day<10?'0'+day:day);
                    var startTimeStr = dateStr + " 00:00:00";
                    var endTimeStr = dateStr + " 23:59:00";
                    if(isNaN(Number(this.interval))){
                        this.$Message.error("过滤,请填入数字");
                        return;
                    }
                    if(isNaN(Number(this.deadweight))){
                        this.$Message.error("低重,请填入数字");
                        return;
                    }
                    var data = {
                        deviceid:deviceid,
                        begintime:startTimeStr,
                        endtime:endTimeStr,
                        timezone : 8,
                        interval:this.interval,
                        deadweight:this.deadweight,
                    }
                    utils.sendAjax(url,data,function(resp){
                        if(resp.status === 0){

                            var records = resp.records,
                                dateArr = [],
                                weightArr = [],
                                speedArr = [],
                                fixedWeightArr = [];
                            if(!records && records.length){
                                me.$Message.success("没有数据");
                                return ;
                            }
                            records.forEach(function(record){
                                dateArr.push(DateFormat.longToDateTimeStr(record.updatetime, 0));
                                weightArr.push(record.weight);
                                speedArr.push(record.speed);
                                fixedWeightArr.push(record.fixedweight);
                            });
                            
                            me.dateArr = dateArr;
                            me.weightArr = weightArr;
                            me.speedArr = speedArr;
                            me.fixedWeightArr = fixedWeightArr;
                            me.weighChart.setOption(me.getWeighChartOption());
                            me.speedChart.setOption(me.getSpeedChartOption());
                            me.$Message.success("查询成功");
                        }else{
                            me.$Message.error("查询失败");
                        }
                    })
                },
           
            },
            computed:{
                contentCls:function(){
                    return {
                        height :this.contentHeight + 'px'
                    }
                },
                weighBoxStyle:function(){
                    return {
                        height:this.isFullScreen?'100%':'50%'
                    }
                },
                speedBoxStyle:function(){
                    return {
                        height:this.isFullScreen?'0':'50%'
                    }
                },
                updateTimeStr:function(){
                    var dateArr = this.dateArr , len = this.dateArr.length;
                    return dateArr[len-1] ? dateArr[len-1] :'';
                }
            },
            mounted :function() {
                var vm = this;
                vm.$nextTick(function(){
                    vm.weighChart = echarts.init(document.getElementById('weigh-box'));
                    vm.speedChart = echarts.init(document.getElementById('speed-box'));
                    vm.weighChart.setOption(vm.getWeighChartOption());
                    vm.speedChart.setOption(vm.getSpeedChartOption());
                    vm.setContentHeight();
                    vm.getWeighingInfo();
                });
                window.onresize = function () { 
                    vm.setContentHeight();
                    vm.weighChart.resize();
                    vm.speedChart.resize();
                }
            },
        })
    </script>
</body>
</html>